<template>
    <div>
        <van-nav-bar title="策略管理" left-text="返回" right-text="新建" left-arrow @click-left="onClickLeft" @click-right="onClickRight"/>
        <div v-for="(item, index) in strategys" :key="index" style="margin:5px">
            <van-swipe-cell>
                <van-cell>
                    <van-row justify="space-around" align="center" style="background:white;border-radius:10px">
                        <van-col span="19">
                            <p style="margin-left:5px"> {{ item.name }} </p>
                        </van-col>
                        <van-col span="5">
                            <van-badge :content="item.count"><van-button plain type="primary" @click="showStrategyDetail(item)">详情</van-button></van-badge>
                        </van-col>
                    </van-row>
                </van-cell>
                <template #right>
                    <van-button square type="danger"  @click="rmStrategy(item)" text="删除" />
                    <van-button square type="primary" @click="showEditPopup(item)" text="编辑" />
                </template>
            </van-swipe-cell>
        </div>
        <van-popup v-model:show="strategy_detail_popup_show" position="left" :style="{ height: '100%',width:'70%' }" >
            <van-cell-group>
                <van-cell title="id" :value="showStrategyInfo.id" />
                <van-cell title="name" :value="showStrategyInfo.name"/>
                <van-cell title="orient" :value="showStrategyInfo.orient"/>
                <van-cell title="available" :value="showStrategyInfo.available"/>
                <!-- <van-cell title="indicator_abbr" :value="showStrategyInfo.indicator_abbr"/>
                <van-cell title="params" :value="showStrategyInfo.params" /> -->
                <van-cell title="condition" :value="showStrategyInfo.condition"/>
            </van-cell-group>
        </van-popup>
        <van-popup v-model:show="createPopupShow" :style="{ height: '60%',width:'70%' }">
            <van-form  @submit="addStrategy">
                <van-cell-group inset>
                    <van-field v-model="newStrategyInfo.name" name="name" label="name:"/>
                    <van-field v-model="newStrategyInfo.orient"  name="orient" label="orient:"/>
                    <!-- <van-field v-model="newStrategyInfo.indicator_abbr" name="indicator_abbr" label="abbr:"/>
                    <van-field label="params:" readonly />
                    <van-field v-model="newStrategyInfo.params" rows="4" type="textarea" maxlength="1000"/> -->
                    <van-field label="condition:" readonly />
                    <van-field v-model="newStrategyInfo.condition" rows="6" type="textarea" maxlength="1000"/>
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">提交</van-button>
                </div>
            </van-form>
        </van-popup>
        <van-popup v-model:show="editPopupShow" :style="{ height: '60%',width:'70%' }">
            <van-form  @submit="setStrategy">
                <van-cell-group inset>
                    <van-field v-model="editStrategyInfo.name" name="name" label="name:"/>
                    <van-field v-model="editStrategyInfo.orient"  name="orient" label="orient:"/>
                    <van-field v-model="editStrategyInfo.available" name="available" label="available:"/>
                    <!-- <van-field v-model="editStrategyInfo.indicator_abbr" name="indicator_abbr" label="abbr:"/> -->
                    <!-- <van-field label="params:" readonly /> -->
                    <!-- <van-field v-model="editStrategyInfo.params" rows="4" type="textarea" maxlength="1000"/> -->
                    <van-field label="condition:" readonly />
                    <van-field v-model="editStrategyInfo.condition" rows="6" type="textarea" maxlength="1000"/>
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">提交</van-button>
                </div>
            </van-form>
        </van-popup>
    </div>
</template>

<script>
import {
        getStrategy,
        createStrategy,
        updateStrategy,
        deleteStrategy,
    } from '@/api';
export default {
  data() {
    return {
      strategy_detail_popup_show: false,
      showStrategyInfo:{},
      newStrategyInfo:{},
      editStrategyInfo:{},
      strategys:[],
      createPopupShow:false,
      editPopupShow:false
    };
  },

  methods: {
    onClickLeft() {
      this.$router.push('/setting');
    },
    onClickRight() {
      this.createPopupShow = true
    },
    showStrategyDetail(item) {
        this.showStrategyInfo = item
        this.strategy_detail_popup_show = true
    },
    showEditPopup(item) {
        this.editStrategyInfo = item
        this.editPopupShow = true
    },
    addStrategy() {
        let _this = this
        let params = this.newStrategyInfo
        createStrategy(params).then(res => {
            console.info(res)
            if(res.status == 1){
                _this.$toast.success('成功');
                _this.createPopupShow = false
                _this.loadStrategy()
            } else {
                _this.$toast.fail(res.msg);
            }
        });
    },
    setStrategy() {
        let _this = this
        let id = this.editStrategyInfo.id
        let params = this.editStrategyInfo
        updateStrategy(id, params).then(res => {
            console.info(res)
            if(res.status == 1){
                _this.$toast.success('成功');
                _this.editPopupShow = false
                _this.loadStrategy()
            } else {
                _this.$toast.fail(res.msg);
            }
        });
    },
    rmStrategy(item) {
        let _this = this
        let id = item.id
        this.$dialog.alert({
            title: "删除确认", //加上标题
            message: "是否真的要删除：" + item.name, //改变弹出框的内容
            showCancelButton: true //展示取水按钮
        })
        .then(() => { //点击确认按钮后的调用
            console.log("点击了确认按钮噢")
            deleteStrategy(id).then(res => {
            console.info(res)
            if(res.status == 1){
                _this.$toast.success('成功');
                _this.loadStrategy()
            } else {
                _this.$toast.fail(res.msg);
            }
        });
        })
        .catch(() => { //点击取消按钮后的调用
                console.log("点击了取消按钮噢")
        })
       
    },
    loadStrategy() {
        let _this = this
        let params = {}
        getStrategy(params).then(res => {
            _this.strategys = res.dataset
        });
    },
  },
   mounted:function(){
       this.loadStrategy()
    }
};
</script>